<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.2.0/turbolinks.js" integrity="sha256-iM4Yzi/zLj/IshPWMC1IluRxTtRjMqjPGd97TZ9yYpU=" crossorigin="anonymous"></script>
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Cousine|Inconsolata" rel="stylesheet">
  <link rel="shortcut icon" type="image/png" href="/favicon.png">

  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/css/css/fontawesome-all.min.css">
  <link rel="stylesheet" href="/css/css/work-sans-v7.css">
  <script src="/js/main.js"></script>

  <!-- Begin Jekyll SEO tag v2.6.1 -->
<title>JS: Convert Sbd To Steem | Hive Developer</title>
<meta name="generator" content="Jekyll v4.0.0" />
<meta property="og:title" content="JS: Convert Sbd To Steem" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="How to convert SBD to STEEM for a specified account." />
<meta property="og:description" content="How to convert SBD to STEEM for a specified account." />
<link rel="canonical" href="convert_sbd_to_steem.html" />
<meta property="og:url" content="convert_sbd_to_steem.html" />
<meta property="og:site_name" content="Hive Developer" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2020-08-26T11:52:22-07:00" />
<script type="application/ld+json">
{"description":"How to convert SBD to STEEM for a specified account.","mainEntityOfPage":{"@type":"WebPage","@id":"convert_sbd_to_steem.html"},"@type":"BlogPosting","url":"convert_sbd_to_steem.html","headline":"JS: Convert Sbd To Steem","dateModified":"2020-08-26T11:52:22-07:00","datePublished":"2020-08-26T11:52:22-07:00","@context":"https://schema.org"}</script>
<!-- End Jekyll SEO tag -->


  
</head>
<body>
<header>
  <h1>
    <button type="button" class="open-nav" id="open-nav"></button>
    <a href="/"  class="logo-link"><img src="/images/logotype_black.svg" height="40" alt="Hive Developer logo"></a>
  </h1>

  
  <form action="/search/" method="get">
    <input type="text" name="q" id="search-input" placeholder="Search">
    <input type="submit" value="Search" style="display: none;">
  </form>
  

  <div id="sidebar" class="sidebar">
	
	
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/">
		<h6 class="ctrl-nav-section title">Introduction</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/#introduction-welcome">Welcome to Hive</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/quickstart/">
		<h6 class="ctrl-nav-section title">Quickstart</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/quickstart/#quickstart-choose-library">Choose Library</a></li>
						
					
						
						<li><a href="/quickstart/#quickstart-hive-full-nodes">Hive Nodes</a></li>
						
					
						
						<li><a href="/quickstart/#quickstart-testnet">Hive Testnet</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/tutorials/">
		<h6 class="ctrl-nav-section title">Tutorials</h6>
		<ul class="cont-nav-section content">
			
				
					
						<li><a href="/tutorials/#tutorials-javascript">Javascript</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-python">Python</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-ruby">Ruby</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-recipes">Recipes</a></li>
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/services/">
		<h6 class="ctrl-nav-section title">Services</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/services/#services-hive-blog">hive.blog</a></li>
						
					
						
						<li><a href="/services/#services-hivesigner">HiveSigner</a></li>
						
					
						
						<li><a href="/services/#services-jussi">Jussi</a></li>
						
					
						
						<li><a href="/services/#services-imagehoster">ImageHoster</a></li>
						
					
						
						<li><a href="/services/#services-dhf">DHF</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/apidefinitions/">
		<h6 class="ctrl-nav-section title">Appbase API</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/apidefinitions/#apidefinitions-condenser-api">Condenser Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-bridge">Bridge</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-account-by-key-api">Account By Key Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-account-history-api">Account History Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-block-api">Block Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-database-api">Database Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-debug-node-api">Debug Node Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-follow-api">Follow Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-jsonrpc">Jsonrpc</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-market-history-api">Market History Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-network-broadcast-api">Network Broadcast Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-rc-api">Rc Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-reputation-api">Reputation Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-rewards-api">Rewards Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-tags-api">Tags Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-transaction-status-api">Transaction Status Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-witness-api">Witness Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-broadcast-ops">Broadcast Ops</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-broadcast-ops-communities">Broadcast Ops Communities</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/resources/">
		<h6 class="ctrl-nav-section title">Resources</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/resources/#resources-overview">Overview</a></li>
						
					
						
						<li><a href="/resources/#resources-client-libs">Client Libraries</a></li>
						
					
						
						<li><a href="/resources/#resources-bluepaper">Bluepaper</a></li>
						
					
						
						<li><a href="/resources/#resources-whitepaper">Whitepaper</a></li>
						
					
						
						<li><a href="/resources/#resources-tools">Tools</a></li>
						
					
						
						<li><a href="/resources/#resources-hivesigner-libs">Hivesigner Libs</a></li>
						
					
						
						<li><a href="/resources/#resources-hive-keychain">Hive Keychain</a></li>
						
					
						
						<li><a href="/resources/#resources-developeradvocate">Community & Help</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/glossary/">
		<h6 class="ctrl-nav-section title">Glossary</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/glossary/#glossary-chain-basics">Chain Basics</a></li>
						
					
						
					
						
						<li><a href="/glossary/#glossary-governance">Governance</a></li>
						
					
						
						<li><a href="/glossary/#glossary-transactions">Transactions</a></li>
						
					
						
						<li><a href="/glossary/#glossary-api">API</a></li>
						
					
						
						<li><a href="/glossary/#glossary-market">Market</a></li>
						
					
				
			
		</ul>
	</section>
	
</div>



  <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
</header>
<div class="main" id="top">
  <div class="hero">
    <h1 class="hero__h1">Hive Developer Portal </h1>
    <img class="hero__img" src="/images/honey-comb-92.png" style="position: relative; top: 10px;" />
  </div>
  <section id="tutorials-javascript-convert-sbd-to-steem" class="row tutorials-javascript-convert-sbd-to-steem">
	<h3>
		<a id="tutorials-javascript-convert-sbd-to-steem">
			JS: Convert Sbd To Steem
			
		</a>
	</h3>
	
		<span class="description"><p><em>How to convert SBD to STEEM for a specified account.</em></p>
</span>
	

	<p><span class="fa-pull-left top-of-tutorial-repo-link"><span class="first-word">Full</span>, runnable src of <a href="https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript/tutorials/32_convert_sbd_to_steem">Convert Sbd To Steem</a> can be downloaded as part of: <a href="https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript">tutorials/javascript</a>.</span>
<br /></p>

<p>This tutorial will take you through the process of checking a specific users’ balances and then broadcasting the intended SBD conversion to the blockchain. Demo account information has been provided to assist with the tutorial. This tutorial has been set up for the <code class="highlighter-rouge">testnet</code> but can be easily be changed for <code class="highlighter-rouge">production</code>.</p>

<p>It should be noted that the converted STEEM will not be available instantly as it takes 3.5 days for the transaction to be processed. It is also not possible to stop a conversion once initialised. During the 3.5 days for it to be converted and as the conversion price fluctuates you could actually be receiving less STEEM than what you should. Because of this, the method in this tutorial is NOT the preferred or most efficient way of converting SBD to STEEM. This tutorial just illustrates that it can be done in this manner.</p>

<p>There is a marketplace on Steemit that allows you to “sell” your SBD instantly. With this process you can get your STEEM immediately and at the exact price that you expect. The market place is the better way to convert your SBD. <a href="https://steemit.com/steem/@epico/convert-sbd-to-steem-and-steem-power-guide-2017625t103821622z">This article</a> provides more information on using the market to exchange your SBD to STEEM</p>

<p>Steemconnect offers an alternative to converting SBD with a “simple link” solution. Instead of running through a list of operations on your account, you can simply use a link similar to the one below substituting the three parameters for your own details. You will be prompted to enter your username and password before the transaction will be executed.
https://steemconnect.com/sign/convert?owner=username&amp;requestid=1234567&amp;amount=0.000%20SBD
This is similar to the steemconnect links that have been covered in previous tutorials. For a list of signing operations that work in this manner you can go to https://v2.steemconnect.com/sign
<a href="https://steemit.com/sbd/@timcliff/how-to-convert-sbd-into-steem-using-steemconnect">This article</a> has more information on using steemconnect</p>

<h2 id="intro">Intro</h2>

<p>This tutorial uses the <code class="highlighter-rouge">database API</code> to gather account information for the current SBD and STEEM balances of the specified user. This information is then used to assist the user in completing the conversion request. The values are then captured and the operation is transmitted via the <code class="highlighter-rouge">broadcast</code> API. The parameters for this <code class="highlighter-rouge">convert</code> function are:</p>

<ol>
  <li><em>owner</em> - The account for which the conversion is being done</li>
  <li><em>requestid</em> - Integer identifier for tracking the conversion. This needs to be a unique number for a specified user</li>
  <li><em>amount</em> - The amount of SBD to withdraw</li>
</ol>

<p>The only other information required is the private active key of the user.</p>

<h2 id="steps">Steps</h2>

<ol>
  <li><a href="#connection"><strong>Configure connection</strong></a> Configuration of <code class="highlighter-rouge">dsteem</code> to communicate with a Steem blockchain</li>
  <li><a href="#user"><strong>User account</strong></a> User account is captured and balances displayed</li>
  <li><a href="#input"><strong>Input variables</strong></a> Collecting the required inputs via an HTML UI</li>
  <li><a href="#broadcast"><strong>Broadcast operation</strong></a> Broadcasting the operation to the blockchain</li>
</ol>

<h4 id="1-configure-connection">1. Configure connection<a name="connection"></a></h4>

<p>As usual, we have a <code class="highlighter-rouge">public/app.js</code> file which holds the Javascript segment of the tutorial. In the first few lines we define the configured library and packages:</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Client</span><span class="p">,</span> <span class="nx">PrivateKey</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">dsteem</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">Testnet</span> <span class="k">as</span> <span class="nx">NetConfig</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">../../configuration</span><span class="dl">'</span><span class="p">;</span> <span class="c1">//A Steem Testnet. Replace 'Testnet' with 'Mainnet' to connect to the main Steem blockchain.</span>

<span class="kd">let</span> <span class="nx">opts</span> <span class="o">=</span> <span class="p">{</span> <span class="p">...</span><span class="nx">NetConfig</span><span class="p">.</span><span class="nx">net</span> <span class="p">};</span>

<span class="c1">// //connect to a steem node, tesetnet in this case</span>
<span class="kd">const</span> <span class="nx">client</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Client</span><span class="p">(</span><span class="nx">NetConfig</span><span class="p">.</span><span class="nx">url</span><span class="p">,</span> <span class="nx">opts</span><span class="p">);</span>
</code></pre></div></div>

<p>Above, we have <code class="highlighter-rouge">dsteem</code> pointing to the testnet with the proper chainId, addressPrefix, and endpoint by importing it from the <code class="highlighter-rouge">configuration.js</code> file. Due to this tutorial altering the blockchain it is preferable to not work on production.</p>

<h4 id="2-user-account">2. User account<a name="user"></a></h4>

<p>The user account is input through the UI. Once entered, the user can select the <code class="highlighter-rouge">search</code> button to display the SBD and STEEM balances for that account. During this step, a random number is also generated for the <code class="highlighter-rouge">requestid</code>. This value can be changed to any integer value as long as it is unique for the specific account. If the requestid is duplicated an error to do with “uniqueness constraint” will be displayed in the console. For ease of use values for a demo account has already been entered in the relevant fields once the page loads.</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="k">async</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="kd">const</span> <span class="nx">account</span> <span class="o">=</span> <span class="nx">NetConfig</span><span class="p">.</span><span class="nx">accounts</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">username</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">account</span><span class="p">.</span><span class="nx">address</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">privateKey</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">account</span><span class="p">.</span><span class="nx">privActive</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>

<p>With the account search function as seen below.</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">window</span><span class="p">.</span><span class="nx">submitAcc</span> <span class="o">=</span> <span class="k">async</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="kd">const</span> <span class="nx">accSearch</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">username</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span>

    <span class="kd">const</span> <span class="nx">_account</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">client</span><span class="p">.</span><span class="nx">database</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="dl">'</span><span class="s1">get_accounts</span><span class="dl">'</span><span class="p">,</span> <span class="p">[[</span><span class="nx">accSearch</span><span class="p">]]);</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`_account:`</span><span class="p">,</span> <span class="nx">_account</span><span class="p">);</span>

    <span class="kd">const</span> <span class="nx">availSBD</span> <span class="o">=</span> <span class="nx">_account</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">sbd_balance</span> 
    <span class="kd">const</span> <span class="nx">availSTEEM</span> <span class="o">=</span> <span class="nx">_account</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">balance</span>

    <span class="kd">const</span> <span class="nx">balance</span> <span class="o">=</span> <span class="s2">`Available balance: </span><span class="p">${</span><span class="nx">availSBD</span><span class="p">}</span><span class="s2"> and </span><span class="p">${</span><span class="nx">availSTEEM</span><span class="p">}</span><span class="s2"> &lt;br/&gt;`</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">accBalance</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">balance</span><span class="p">;</span>

    <span class="c1">//create random number for requestid paramter</span>
    <span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="mi">10000000</span><span class="p">);</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">requestID</span><span class="dl">"</span><span class="p">).</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">x</span>
<span class="p">}</span>
</code></pre></div></div>

<h4 id="3-input-variables">3. Input variables<a name="input"></a></h4>

<p>The parameters for the <code class="highlighter-rouge">convert</code> function are input in the UI and assigned as seen below once the user presses the convert button.</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//get all values from the UI</span>
<span class="c1">//get account name</span>
<span class="kd">const</span> <span class="nx">username</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">username</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span>
<span class="c1">//get private active key</span>
<span class="kd">const</span> <span class="nx">privateKey</span> <span class="o">=</span> <span class="nx">PrivateKey</span><span class="p">.</span><span class="nx">fromString</span><span class="p">(</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">privateKey</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span>
<span class="p">);</span>
<span class="c1">//get convert amount</span>
<span class="kd">const</span> <span class="nx">quantity</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">quantity</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span>
<span class="c1">//create correct format</span>
<span class="kd">const</span> <span class="nx">convert</span> <span class="o">=</span> <span class="nx">quantity</span><span class="p">.</span><span class="nx">concat</span><span class="p">(</span><span class="dl">'</span><span class="s1"> SBD</span><span class="dl">'</span><span class="p">);</span>
<span class="c1">//assign integer value of ID</span>
<span class="kd">const</span> <span class="nx">requestid</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">requestID</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span><span class="p">);</span>
</code></pre></div></div>

<h4 id="4-broadcast-operation">4. Broadcast operation<a name="broadcast"></a></h4>

<p>With all the parameters assigned we create an array for the <code class="highlighter-rouge">convert</code> function and transmit it to the blockchain via the <code class="highlighter-rouge">sendOperation</code> function in the <code class="highlighter-rouge">broadcast</code> API.</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//create convert operation</span>
<span class="kd">const</span> <span class="nx">op</span> <span class="o">=</span> <span class="p">[</span>
    <span class="dl">'</span><span class="s1">convert</span><span class="dl">'</span><span class="p">,</span>
    <span class="p">{</span> <span class="na">owner</span><span class="p">:</span> <span class="nx">username</span><span class="p">,</span> <span class="na">amount</span><span class="p">:</span> <span class="nx">convert</span><span class="p">,</span> <span class="na">requestid</span><span class="p">:</span> <span class="nx">requestid</span> <span class="p">},</span>
<span class="p">];</span>
    
<span class="c1">//broadcast the conversion</span>
<span class="nx">client</span><span class="p">.</span><span class="nx">broadcast</span><span class="p">.</span><span class="nx">sendOperations</span><span class="p">([</span><span class="nx">op</span><span class="p">],</span> <span class="nx">privateKey</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span>
    <span class="kd">function</span><span class="p">(</span><span class="nx">result</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span>
            <span class="dl">'</span><span class="s1">included in block: </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">result</span><span class="p">.</span><span class="nx">block_num</span><span class="p">,</span>
            <span class="dl">'</span><span class="s1">expired: </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">result</span><span class="p">.</span><span class="nx">expired</span>
        <span class="p">);</span>
        <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">convertResultContainer</span><span class="dl">'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">flex</span><span class="dl">'</span><span class="p">;</span>
        <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">convertResult</span><span class="dl">'</span><span class="p">).</span><span class="nx">className</span> <span class="o">=</span>
            <span class="dl">'</span><span class="s1">form-control-plaintext alert alert-success</span><span class="dl">'</span><span class="p">;</span>
        <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">convertResult</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Success</span><span class="dl">'</span><span class="p">;</span>
    <span class="p">},</span>
    <span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">error</span><span class="p">);</span>
        <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">convertResultContainer</span><span class="dl">'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">flex</span><span class="dl">'</span><span class="p">;</span>
        <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">convertResult</span><span class="dl">'</span><span class="p">).</span><span class="nx">className</span> <span class="o">=</span>
            <span class="dl">'</span><span class="s1">form-control-plaintext alert alert-danger</span><span class="dl">'</span><span class="p">;</span>
        <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">convertResult</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">error</span><span class="p">.</span><span class="nx">jse_shortmsg</span><span class="p">;</span>
    <span class="p">}</span>
<span class="p">);</span>
</code></pre></div></div>

<p>The results of the operation is displayed on the UI along with a block number in the console to confirm a successful operation.</p>

<h3 id="to-run-this-tutorial">To run this tutorial</h3>

<ol>
  <li><code class="highlighter-rouge">git clone https://gitlab.syncad.com/hive/devportal.git</code></li>
  <li><code class="highlighter-rouge">cd devportal/tutorials/javascript/32_convert_sbd_to_steem</code></li>
  <li><code class="highlighter-rouge">npm i</code></li>
  <li><code class="highlighter-rouge">npm run dev-server</code> or <code class="highlighter-rouge">npm run start</code></li>
  <li>After a few moments, the server should be running at http://localhost:3000/</li>
</ol>

<hr />

</section>

</div>
<div class="footer">
  <a href="#">Back to top</a>
</div>
<script>
    document.getElementById("open-nav").addEventListener("click", function () {
        document.body.classList.toggle("nav-open");
    });
</script>
</body>
</html>


<script src="/js/adjust.js"></script>

